<template>
    <div class="navBar">
        <div class="left">
            <i style="padding: 0 15px;" @click="toggle" :class="!isCollapse? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="item in breadcrumb" :key="item.path" :to="{ path: item.path }">{{item.meta.name}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="right">用户</div>
    </div>
</template>

<script>
import {
    mapMutations,
    mapState
} from "vuex"
export default {
    data() {
        return {
            isOpen:true,
            breadcrumb:[]
        };
    },
    computed: {
        ...mapState(["isCollapse"])
    },
    watch:{
        $route(to){
            this.breadcrumb = to.matched;
        }
    },
    created() {
        this.breadcrumb = this.$route.matched;
    },
    mounted() {

    },
    methods: {
        ...mapMutations(["toggle"])
    },
};
</script>

<style scoped lang="scss">
.navBar{
    height: 50px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    .left{
        cursor: pointer;
        display: flex;
        align-items: center;
    }
}
</style>
